<template>
    <Body />
    <Customer />
    <NewsList />
    <About />
</template>

<script setup>
import About from './index/About.vue';
import Customer from './index/Customer.vue';
import Body from './index/IndexBody.vue';
import NewsList from './index/NewsList.vue';
</script>

<style lang="scss">
.el-header {
    height: 125px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: white;
    --el-header-padding: 0px;
}

.el-main {
    display: flex;
    --el-main-padding: 0px;
    overflow: hidden;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 130px;
}

@media screen and (min-width: 1025px) {
    .el-footer {
        width: 100%;
        height: auto;
        background-color: rgb(32, 35, 42);
        --el-footer-padding: 0;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .el-footer {
        width: 100%;
        height: auto;
        background-color: rgb(32, 35, 42);
        --el-footer-padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .el-footer {
        width: 100%;
        height: 800px;
        background-color: rgb(32, 35, 42);
        --el-footer-padding: 0;
    }
}

.common-layout {
    width: 100%;
}
</style>